<template>
  <div class="app-container balance-datail-box">
    <!-- 搜索数据 -->
    <el-form :inline="true" label-width="68px" style="margin-bottom: 15px;">
      <el-form-item label="物料编码">
        <el-input v-model="searchForm.searchCode" clearable  size="small" style="width: 240px" />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.searchName" clearable size="small" style="width: 240px" />
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" v-hasPermi="['wm:report:balance:query']" icon="el-icon-search" @click="search">搜索
        </el-button>
        <el-button  v-hasPermi="['wm:report:balance:query']" icon="el-icon-refresh" @click="serchReset()">重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8 operation-btn">
      <el-col :span="1.5">
        <el-button type="primary" v-hasPermi="['wm:report:balance:query']" plain icon="el-icon-menu" size="mini" @click="checkleAll">查询所有</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-select v-model="selectwarehouse" placeholder="仓库" @change="warehouseChange">
          <el-option v-for="item in optionswarehouse" :key="item.uniqueId" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" v-hasPermi="['wm:report:balance:export']" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" v-hasPermi="['wm:report:balance:print']" plain icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
      </el-col>
    </el-row>
    <!-- 打印数据 -->
    <PrintPage :printData="printData" :wmSpecail="wmSpecail" :typeTitle="printTypeName" :type="$route.query.type"
      ref="startPrint" :title="printName" />
    <!-- 物料数据 -->
    <el-table v-loading="loading" :data="basicfileList" border :height="maxHeight">
      <el-table-column type="index" width="60" align="center" label="序号" :key="1">
      </el-table-column>
<!--      <el-table-column label="仓库" align="center" prop="whName" v-if="$route.query.type=='total'">
      </el-table-column> -->
      <el-table-column label="物料编码" align="center" prop="invCode" :key="2">
      </el-table-column>
      <el-table-column label="物料名称" align="center" prop="invName" :key="3">
        <template slot-scope="newData">
          <div v-if="wmSort.sortAttrMerge==1">
            <span>{{newData.row.invName}}</span>
            <span>{{newData.row.invAttribute}}</span>
          </div>
          <div v-if="wmSort.sortAttrMerge==0">
            <span>{{newData.row.invName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="wmSort.sortAttrAlia" v-if="wmSort.sortAttrMerge!==1" align="center" prop="invAttribute"
        :key="4" />
      <el-table-column label="主计量" align="center" prop="unitName" width="75" :key="5" />
      <el-table-column label="批次日期" v-if="$route.query.type=='list'" align="center" prop="batchDate" width="200"
        :key="12" />
      <!-- 特殊属性 -->
      <el-table-column :label="wmSpecail[0].name" width="100"
        v-if="wmSpecail.length>0&&wmSpecail[0].status=='0'&&$route.query.type=='list'" prop="f1" align="center"
        :key="6">
      </el-table-column>
      <el-table-column :label="wmSpecail[1].name" width="100"
        v-if="wmSpecail.length>1&&wmSpecail[1].status=='0'&&$route.query.type=='list'" prop="f2" align="center"
        :key="7">
      </el-table-column>
      <el-table-column :label="wmSpecail[2].name" width="100"
        v-if="wmSpecail.length>2&&wmSpecail[2].status=='0'&&$route.query.type=='list'" prop="f3" align="center"
        :key="8">
      </el-table-column>
      <el-table-column :label="wmSpecail[3].name" width="100"
        v-if="wmSpecail.length>3&&wmSpecail[3].status=='0'&&$route.query.type=='list'" prop="f4" align="center"
        :key="9">
      </el-table-column>
      <el-table-column :label="wmSpecail[4].name" width="100"
        v-if="wmSpecail.length>4&&wmSpecail[4].status=='0'&&$route.query.type=='list'" prop="f5" align="center"
        :key="10">
      </el-table-column>
      <el-table-column label="数量" align="center" prop="quantity">
        <template slot-scope="newData">
          <div style="text-align: right;">
            <span>{{newData.row.quantity}}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分类查询分页信息 -->
    <pagination v-show="total>=19" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getBlanceList" />
  </div>
</template>

<script>
  import {
    listWarehouses,
    checkWarehouses,
    exportBalance,
    checkWarehouse,
    listBlance
  } from "../../api/report"; //物料接口
  import PrintPage from "../../components/Reporrt/Balance/print"; //打印组件
  import print from "print-js"; //打印js
  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 仓库查询参数
        warehouseQuery: {
          invoiceType: "",
          bredVouch: "",
          workType: ""
        },
        //仓库选择
        optionswarehouse: [],
        selectwarehouse: "",
        selectwhname: "",
        //物料特殊属性
        wmSpecail: [],
        //物料数据最大高度
        maxHeight: null,
        //搜索参数
        searchForm: {
          searchName: "", //搜索物料名称
          searchCode: "", //搜索物料编码
        },
        //仓库对应物料分类信息
        wmSort: {
          sortAttrAlia: "型号规格", //别名
          sortAttrMerge: 0, //规格合并
        },
        // 现存量查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          invName: "",
          invCode: "",
          warehouse: "", //仓库代码
          type: ""
        },
        // 总条数
        total: 0,
        //小数位数
        decimal: "4",
        //物料数据
        basicfileList: [],
        //打印分类名称
        printName: "",
        printTypeName: "",
        //打印数据
        printData: [],
        rules: {

        }
      }

    },
    created() {
      // 入库单据查询参数
      this.queryParams = {
        type: this.$route.query.type
      };

      this.getHouselList()
    },
    methods: {
      //仓库列表
      getHouselList() {
        listWarehouses(this.warehouseQuery).then(res => {
          if (res.code == 200) {
            this.optionswarehouse = res.rows;
            if (this.optionswarehouse.length > 0) {
              this.warehouseChange(this.optionswarehouse[0].code);
              this.selectwarehouse = this.optionswarehouse[0].code;
            } else {
              this.loading = false;
            }
          }
        })
      },
      //明细不要仓库
      // 汇总不要属性
      /*  仓库选择 */
      warehouseChange(code) {
        checkWarehouses(code).then(res => {
          // 清空入库单据搜索
          this.searchFrom = {
            searchCode: "",
            searchName: "",
          };
          this.queryParams.warehouse = code;
          let wmObj = {};
          wmObj = this.optionswarehouse.find(item => {
            return item.code == code;
          })
          //物料分类下规格别名
          this.wmSort.sortAttrAlia = res.data.invSorts[0].attrAlias || "型号规格";
          //物料分类下规格合并
          this.wmSort.sortAttrMerge = res.data.invSorts[0].attrMerge;
          this.selectwhname = wmObj.name;
          //特殊物料
          this.wmSpecail = res.data.invSorts[0].invIndividuals;
          this.decimal = res.data.invSorts[0].quantityDigit;
          this.getBlanceList()
        })

      },

      //现存量列表
      getBlanceList() {
        this.loading = true;
        listBlance(this.queryParams).then(res => {
          if (res.code == 200) {
            const list = JSON.parse(JSON.stringify(res.data.rows));
            list.forEach(obj => {
              obj.quantity = obj.quantity.toFixed(this.decimal)
            })
            this.basicfileList = list;
            this.total = res.data.total;
            if (this.basicfileList.length >= 19) { //条数总数大于显示出现滚动条
              this.maxHeight = (`${document.documentElement.clientHeight}` - 270);
            } else {
              this.maxHeight = null;
            }
            this.loading = false;
          }
        })
      },

      //搜索物料
      search() {
        if (this.searchForm.searchName == "" && this.searchForm.searchCode == "") {
          this.msgError("物料编码或物料名称不能同时为空！");
        } else {
          this.queryParams.invName = this.searchForm.searchName; //赋值物料名称
          this.queryParams.invCode = this.searchForm.searchCode; //赋值物料编码
          this.getBlanceList();
        }
      },

      // 查询所有
      checkleAll() {
        //清空搜索信息，避免干扰
        this.searchForm.searchName = "";
        this.searchForm.searchCode = "";
        this.queryParams.invName = "";
        this.queryParams.invCode = "";
        this.getBlanceList();
      },

      //现存量导出
      handleExport() {
        let queryParams = this.queryParams;
        this.$confirm(`是否确认导出${this.selectwhname}现存量?`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportBalance(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
      },

      // 打印
      handlePrint() {
        let number = 1;
        if (this.$route.query.type == "list") {
          this.printTypeName = "现存量明细"
        } else if (this.$route.query.type == "total") {
          this.printTypeName = "现存量汇总"
        }
        this.printData = this.basicfileList;
        this.printName = this.selectwhname;
        this.printData.forEach(obj => {
          obj.id = number++
        })
        setTimeout(() => {
          this.$print(this.$refs.startPrint.$refs.print);
        }, 0)
      },

      //搜索表单重置
      serchReset() {
        for (let key in this.searchForm) {
          this.searchForm[key] = ""
        }
      },
    },

    components: {
      PrintPage
    },

  };
</script>
<style lang="scss">
  .balance-datail-box {
    .txt-right {
      input {
        text-align: right;
      }
    }

    .el-select input {
      height: 28px;
      line-height: 28px;
    }

    .el-input--medium .el-input__icon {
      line-height: 28px;
    }
     .el-select--medium{
       width: 150px;
     }
  }
</style>
